<template>
  <div>
    <el-card>
      <v-table
        ref="tableRef"
        :table="table"
        :apiFn="tablePage"
        :apiParam="{ current: 1, size: 10, daterange: undefined }"
        :search="form"
        :formParam="formParam"
      >
        <!-- from -->
        <template #customize="{ label, key }">
          <el-input
            v-model="formParam[key]"
            :placeholder="`请输入${label}`"
            clearable
          />
        </template>
        <!-- 中间层：信息/按钮等 -->
        <!-- <template #info></template> -->
        <!-- table -->
        <template #image="{ row }">
          <el-image
            style="width: 50px; height: 50px"
            :src="row.image"
            :preview-src-list="[row.image]"
            preview-teleported
          />
        </template>
        <template #operate="{ row }">
          <el-popconfirm title="确认删除此项吗？" @confirm="onDelete(row.id)">
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </v-table>
    </el-card>
  </div>
</template>
<script  setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { table, form } from "./config/page";
import { tablePage, tableDelete } from "@/api";

// ref
const tableRef = ref(null);
const formParam = ref({});

// delete
const onDelete = async (id) => {
  await tableDelete({ id });
  ElMessage.success("删除成功");
  onRefresh();
};

const onRefresh = () => {
  tableRef.value.refresh();
};
</script>

<style scoped lang="scss"></style>
